<template>
  <div v-if="show" class="gift-modal">
    <van-overlay :show="true" />
    <div class="modal-content">
      <div class="bag-title">my rewards</div>
      <div class="close-icon" @click="closeModal">
        <van-icon name="cross" />
      </div>
      <div class="gift-box">
        <!-- <img
          class="border-line"
          src="@/assets/img/bag-bg.png"
          alt=""
          srcset=""
        /> -->
        <ul class="list">
          <li v-for="item in listData" :key="item.id" @click="viewReward(item)">
            <div class="prescription">{{ item.timeText }}</div>
            <img :src="item.icon" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <gift-detail-modal ref="giftDetailModal" />
  </div>
</template>

<script>
import GiftDetailModal from './GiftDetailModal.vue'
import { mapState } from 'vuex'
export default {
  name: 'BagModal',
  components: {
    GiftDetailModal
  },
  data() {
    return {
      show: false,
      detail: '',
      currentTimes: 0,
      listData: [],
      timer: null
    }
  },
  computed: {
    ...mapState({
      buyStatus: 'buyStatus'
    })
  },
  watch: {
    buyStatus(newVal) {
      if (newVal && this.show) {
        this.getDetail()
        this.$store.commit('changeBuyStatus', false)
        this.$refs.giftDetailModal.closeModal()
      }
    }
  },
  unmounted() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    showModal() {
      this.$jsBridge._on('onNativeBack', this.getDetail)
      this.show = true
      this.getDetail()
      return new Promise((resolve, reject) => {
        console.log(reject)
        this.callback = resolve
      })
    },
    callback() {},
    async getDetail() {
      const { code, data = [] } = await this.$request({
        url: '/api/v2/activity/turntable/backpack'
      })
      if (code === 200) {
        this.currentTimes = Math.floor(new Date().getTime() / 1000)
        this.detail = data
        this.timer = setInterval(() => {
          this.formatData()
        }, 1000)
      }
    },
    formatData() {
      console.log('formatData timer')
      const curtimes = Math.floor(new Date().getTime() / 1000)
      if (!this.detail) return []
      const arr = this.detail.map((val) => {
        const { expireSeconds } = val
        const surplusTime = this.currentTimes - curtimes + expireSeconds
        let timeText = ''
        if (surplusTime > 0) {
          var secondTime = parseInt(surplusTime) // 秒
          var minuteTime = 0 // 分
          var hourTime = 0 // 小时
          if (secondTime >= 60) {
            minuteTime = parseInt(secondTime / 60)
            secondTime = parseInt(secondTime % 60)
            if (minuteTime >= 60) {
              hourTime = parseInt(minuteTime / 60)
              minuteTime = parseInt(minuteTime % 60)
            }
          }
          timeText =
            '' +
            (parseInt(secondTime) < 10
              ? '0' + parseInt(secondTime)
              : parseInt(secondTime))

          // if (minuteTime > 0) {
          timeText =
            '' +
            (parseInt(minuteTime) < 10
              ? '0' + parseInt(minuteTime)
              : parseInt(minuteTime)) +
            ':' +
            timeText
          // }
          // if (hourTime > 0) {
          timeText =
            '' +
            (parseInt(hourTime) < 10
              ? '0' + parseInt(hourTime)
              : parseInt(hourTime)) +
            ':' +
            timeText
          // }
        }
        val.timeText = timeText
        return val
      })

      this.listData = arr.filter((val) => val.timeText)
      if (this.listData.length === 0) {
        clearInterval(this.timer)
        return false
      }
    },
    viewReward(item) {
      this.$refs.giftDetailModal.showModal(item).then(() => {
        this.getDetail()
      })
    },
    closeModal() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.show = false
      this.callback()
    }
  }
}
</script>
<style lang="less" scoped>
.modal-content {
  position: fixed;
  width: 90%;
  z-index: 10;
  top: 1rem;
  left: 5%;
  .close-icon {
    position: absolute;
    right: 0.2rem;
    top: 0.4rem;
    color: #fff;
  }
  .bag-title {
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    background: #ff6e27;
    border-radius: 0.24rem 0.24rem 0 0;
    opacity: 1;
    border-top: 5px solid #fbc63f;
    border-left: 5px solid #fbc63f;
    border-right: 5px solid #fbc63f;
    text-align: center;
    color: #f5f5f5;
    font-size: 0.46rem;
    margin: 0 auto;
  }
  .gift-box {
    position: relative;
    background: url('@/assets/img/bag-bg.png') no-repeat 0 0/100%;
    padding: 0.4rem;
    height: 9.3rem;
    .list {
      overflow-y: auto;
      height: 8.8rem;
      padding: 0.1rem 0;
      li {
        display: inline-block;
        width: 31%;
        background: #fff;
        border-radius: 0.14rem;
        opacity: 1;
        margin: 0 0 0.1rem 0.1rem;
        text-align: center;
        .prescription {
          font-size: 0.24rem;
          padding-top: 0.1rem;
          color: #6e2400;
        }
        img {
          max-height: 1.6rem;
        }
      }
    }
  }
}
</style>
